<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Autocomplete with Multiple Selector</title>
		<cfoutput>
		<script type='text/javascript' src='../core/js/prototype.js'></script>
		<script type='text/javascript' src='../core/js/scriptaculous.js'></script>
		<script type='text/javascript' src='../core/js/mxAjax.js'></script>
		<script type='text/javascript' src='../core/js/mxAutocompleteMS.js'></script>
		</cfoutput>
		<script language="javascript">
			var url = "<cfoutput>#ajaxUrl#</cfoutput>";
			
			function init() {
				new mxAjax.AutocompleteMS({
					indicator: "indicator",
					minimumCharacters: "1",
					target: "postData",
					className: "autocomplete",
					paramArgs: new mxAjax.Param(url,{cffunction:"getStateList"}),
					parser: new mxAjax.CFQueryToJSKeyValueParser(),
					source: "searchCharacter",
					selectionDisplay: "selection"
				});
			}
			
			addOnLoadEvent(function() {init();});
		</script>
		
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		
		
		<h1>Autocomplete with Multiple selection</h1>
		<table>
			<tr>
				<td width="18" align="right">
					<span id="indicator" style="display:none;"><img src="../core/images/indicator.gif" /></span>
				</td>
				<td width="1"></td>
				<td>
					State : <input id="searchCharacter" name="searchCharacter" type="text" size="40" />
					&nbsp;&nbsp;
					<div id="selection" style="overflow-x: hidden; overflow-y: automatic;position: relative;z-index:1;left:49px;width:270px"></div>
				</td>
				<td valign="top">
					Data to be posted <br>
					<input type="text" id="postData" name="postData">
				</td>
			</tr>
		</table>
		
		
	</body>
</html>